<template>
  <div>
    <!-- 推荐攻略 -->

    <div class="zhengwen" v-if="post.images">
      <!-- 攻略正文  1-2张图 -->
      <div v-if="post.images.length>0&&post.images.length <=2">
        <div class="shuangmian">
          <div>
            <img :src="post.images[0]" alt class="one" />
          </div>

          <span>
            <h3>
              <nuxt-link :to="`/post/detail?id=${post.id}`">{{post.title}}</nuxt-link>
            </h3>

            <nuxt-link :to="`/post/detail?id=${post.id}`"><p>{{post.summary}}</p></nuxt-link>
            <!-- 定位地点 -->
            <div class="didian">
              <div class="el-icon-location-outline">
                {{post.cityName}}
                <span>
                  by
                  <img :src="$axios.defaults.baseURL+post.account.defaultAvatar" alt />
                  {{post.account.nickname}}
                </span>
                <span class="el-icon-view">{{post.watch}}</span>
              </div>
              <div class="didian_youbian">{{post.like || 0}} 赞</div>
            </div>
          </span>
        </div>
      </div>

      <!-- 攻略正文 3张图以上-->
      <div v-else>
        <h3>
          <nuxt-link :to="`/post/detail?id=${post.id}`">{{post.title}}</nuxt-link>
        </h3>
        <nuxt-link :to="`/post/detail?id=${post.id}`">
          <p>{{post.summary}}</p>
          <img :src="post.images[0]" alt class="one" />
          <img :src="post.images[1]" alt class="one" />
          <img :src="post.images[2]" alt class="one" />
        </nuxt-link>

        <!-- 定位地点 -->
        <div class="didian">
          <div class="el-icon-location-outline">
            {{post.cityName}}
            <span>
              by
              <img :src="$axios.defaults.baseURL+post.account.defaultAvatar" alt />
              {{post.account.nickname}}
            </span>
            <span class="el-icon-view">{{post.watch}}</span>
          </div>
          <div class="didian_youbian">{{post.like || 0}} 赞</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    post: {
      type: Object,
      default: {
        images: []
      }
    }
  },
 
};
</script>

<style lang="less" scoped>
//攻略正文
.zhengwen {
  border-bottom: 1px solid #ccc;
  h3 {
    font-size: 16px;
    font-weight: 200;
    padding: 20px 0;
  }
  img {
    width: 220px;
    height: 150px;
    margin-left: 14px;
  }
  .one {
    margin-left: 0;
  }
  p {
    font-size: 14px;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  // 定位地点
  .didian {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 10px 0;
    img {
      width: 16px;
      height: 16px;
      border-radius: 50%;
    }
    .didian_youbian {
      color: orange;
    }
  }
}
.shuangmian {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;

  img {
    margin-right: 10px;
    width: 220px;
    height: 150px;
  }
}
</style>